<template>
  <div>
    <panel-top :earn="not_pay_income" :pay_amount="pay_amount" :yesterdayearn="yesterdayearn" :per="per" :loading="paymentInfo_init_loading"/>

    <section class="table-box" v-loading="tableLoading" :element-loading-text="$t('unit.loading')">
      <div class="header">
        <span>{{$t('income.history_income')}}</span>
      </div>
      <table>
        <thead>
          <tr>
            <th class="pointer" @click="sortChange('day', 1)">{{$t('income.date')}}
              <i class="iconfont" :class="[sort1==='asc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th class="pointer" @click="sortChange('difficulty', 2)">{{$t('income.difficulty')}}
              <i class="iconfont" :class="[sort2==='asc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th class="pointer" @click="sortChange('hash_rate', 3)">{{$t('income.hash_rate_per')}}
              <i class="iconfont" :class="[sort3==='asc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th class="pointer" @click="sortChange('total_rewards', 4)">{{$t('income.total_rewards')}}
              <i class="iconfont" :class="[sort4==='asc' ? 'icon-iconset0413' : 'icon-iconset0414']"></i>
            </th>
            <th class="pointer">{{$t('income.income_method')}}</th>
          </tr>
        </thead>
        <tbody>
          <template v-if="total_count">
            <tr v-for="(item, index) in tableData" :key="index">
              <td>{{item.day}}</td>
              <td>{{item.difficulty | formatHashrate}}</td>
              <td>{{item.hash_rate | formatHashrate}}H/s</td>
              <td>{{item.total_rewards / 100000000}} {{nowCoinType}}</td>
              <td>{{item.balance_type}}</td>
            </tr>
          </template>
          <template v-else>
            <tr>
              <td colspan="5">{{$t('unit.no_data')}}</td>
            </tr>
          </template>
        </tbody>
      </table>
    </section>
    <Pagination :page="page | num" :pageSize="pagesize | num" :totalCount="total_count | num" :disabled="tableLoading" :sizeChange="sizeChange" :currentChange="currentChange" />
  </div>
</template>
<script>
import {
  InWorkStats,
  InWorkerHistory,
} from '@/api';
import { mapGetters } from 'vuex';
import Spinner from '@/components/Spinner';
import Pagination from '@/components/Pagination';

import panelTop from './common/panelTop';

export default {
  components: {
    panelTop,
    Spinner,
    Pagination,
  },
  data() {
    return {
      timer: undefined,
      not_pay_income: '',
      pay_amount: '',
      yesterdayearn: '',
      per: '',
      paymentInfoLoading: false,
      paymentInfo_init_loading: true,

      showTodayData: false,
      total_rewards: '',
      page: 1,
      pagesize: 10,
      total_count: 0,
      order_by: 'day',
      sort: 'desc',
      sort1: 'desc',
      sort2: 'desc',
      sort3: 'desc',
      sort4: 'desc',
      tableData: [],
      tableLoading: false,
    };
  },
  computed: {
    ...mapGetters(['subCuid', 'subCoinType']),
    nowCoinType() {
      return this.subCoinType.toUpperCase();
    },
    tableValueFormatParm() {
      return 10 ** 8;
    },
    incomeDecimal() {
      return 8;
    },
  },
  created() {
    this.historyProfit();
    this.getPaymentInfo();
    this.timer = window.setInterval(() => {
      this.getPaymentInfo();
    }, 15000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    sortChange(val, sortIndex) {
      this.order_by = val;
      if (this[`sort${sortIndex}`] === 'asc') {
        this.sort = 'desc';
        this[`sort${sortIndex}`] = 'desc';
      } else {
        this.sort = 'asc';
        this[`sort${sortIndex}`] = 'asc';
      }
      this.historyProfit();
    },
    sizeChange(pagesize) {
      this.pagesize = pagesize;
      this.historyProfit();
    },
    currentChange(page) {
      this.page = page;
      this.historyProfit();
    },
    getPaymentInfo() {
      if (this.paymentInfoLoading) {
        return;
      }
      this.paymentInfoLoading = true;
      InWorkStats({
        coin_type: this.subCoinType,
        puid: this.subCuid,
      }).then((response) => {
        if (response.data.status === 1) {
          const data = response.data.data;
          this.not_pay_income = this.tableValueFormat(data.not_pay_income);
          this.pay_amount = this.tableValueFormat(data.pay_income);
          this.yesterdayearn = this.tableValueFormat(data.net_income);
          this.per = this.tableValueFormat(data.today_income);
        } else {
          this.not_pay_income = '';
          this.pay_amount = '';
          this.yesterdayearn = '';
          this.per = '';
        }
        this.paymentInfoLoading = false;
        this.paymentInfo_init_loading = false;
      }).catch(() => {
        this.paymentInfoLoading = false;
        this.paymentInfo_init_loading = false;
      });
    },
    tableValueFormat(value) {
      return (value / this.tableValueFormatParm).toFixed(this.incomeDecimal);
    },

    historyProfit() {
      if (this.tableLoading) {
        return;
      }
      this.tableLoading = true;
      InWorkerHistory({
        coin_type: this.subCoinType,
        puid: this.subCuid,
        page: this.page,
        pagesize: this.pagesize,
        orderBy: this.order_by,
        sort: this.sort,
      })
        .then((response) => {
          if (response.data.status === 1) {
            const data = response.data.data;
            this.tableData = data.list;
            this.total_count = data.total_num;
          }
          this.tableLoading = false;
        })
        .catch(() => {
          this.tableLoading = false;
        });
    },
  },
};
</script>
